﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="$safeitemrootname$_CRUD.aspx.cs" Inherits="$rootnamespace$.$safeitemrootname$_CRUD" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <!-- Twitter bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

    <!-- apiCheck is used by formly to validate its api -->
    <script src="//rawgit.com/kentcdodds/apiCheck.js/latest/dist/api-check.js"></script>
    <!-- This is the latest version of angular (at the time this template was created) -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>

    <!-- This is the current state of master for formly core. -->
    <script src="//rawgit.com/formly-js/angular-formly/latest/dist/formly.js"></script>
    <!-- This is the current state of master for the bootstrap templates -->
    <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/latest/dist/angular-formly-templates-bootstrap.js"></script>
    <script src="//rawgit.com/angular-ui/ui-mask/master/src/mask.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/it.js"></script>

    <!-- AngularJS DatetimePicker -->
    <link href="../assets/plugins/datetimepicker/datetimepicker.css" rel="stylesheet" />
    <script type="text/javascript" src="../assets/plugins/datetimepicker/datetimepicker.js"></script>
    <!-- AngularJS DatetimePicker -->
          
    <script type="text/javascript" lang="javascript" src="/Scripts/Formly/FormlyHelper.js"></script>
    <script type="text/javascript" lang="javascript" src="/Scripts/GrayParrot.Core.js"></script> 
    <script type="text/javascript" lang="javascript" src="/Scripts/GrayParrot.AngularJS.js"></script> 

    <title>Grid CRUD Page</title>

      <style>
          body {
            margin: 20px
          }

          .formly-field {
            margin-bottom: 16px;
          }
      </style>
</head>

<body ng-app="formlyExample" ng-controller="MainCtrl as vm">

    <h1>GRID CRUD Page<br /><hr /></h1>
    <div ng-if="vm.loadingData.$$state.status === 0" style="margin:20px 0;font-size:2em">
        <strong>Loading...</strong>
    </div>
    <div ng-if="vm.loadingData.$$status.state !== 0">
        <form ng-submit="vm.onSubmit()" novalidate>
            <formly-form model="vm.model" fields="vm.fields" form="vm.form">
            <button type="sumbit" class="btn btn-primary submit-button" ng-disabled="vm.form.$invalid">Submit</button> <!-- ng-click="ok()" -->
            </formly-form>
        </form>
    </div>

</body>

   <script>
       /*
          FormlyManager parameters:
          1) loadUrl: Controller url for loading fields...
          2) sendUrl: Controller url for action method (Add, Edit)...
          3) Container ID. The id of the container if it is a div or element different from the html body, otherwise 'body'
          4) Succes callback...
          5) Error callback...
          6) Shortcut callback. if present, the sendUrl must be ''
       */
       var idToEdit = GetQueryStringParams("id");

       if (idToEdit == undefined) {
           FormlyManager('/api/<!-- CONTROLLER URL -->/LoadFields', '/api/<!-- CONTROLLER URL -->/Add');
       } else {
           FormlyManager('/api/<!-- CONTROLLER URL -->/LoadFields?id=' + idToEdit, '/api/<!-- CONTROLLER URL -->/Edit');
       }

   </script>

</html>
